<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
  <link rel="stylesheet" href="../css/index.css">
  <link rel="stylesheet" href="../css/appointment.css">
  <style lang="">
    select {
      height: 100%!important;
    }
  </style>
  <title>完善预约订单</title>
</head>

<body class="appointment page-group">
  <div class="page">
    <!-- //<header class="bar bar-nav" id="golbalHeader"></header> -->

    <!-- 这里是页面内容区 -->
    <div class="content">
      <!-- <div class="pull-to-refresh-layer">
        <div class="preloader"></div>
        <div class="pull-to-refresh-arrow"></div>
      </div> -->

      <div class="list-block">
        <ul>
          <li class="item-content">
            <div class="item-media">
              <i class="icon icon-f7"></i>
            </div>
            <div class="item-inner">
              <div class="item-title">服务名称</div>
              <div class="item-after" id="serviceName"></div>
            </div>
          </li>
          <li class="item-content">
            <div class="item-media">
              <i class="icon icon-f7"></i>
            </div>
            <div class="item-inner">
              <div class="item-title">预约时间</div>
              <div class="item-after">
                <input type="text" id='datetime-picker' placeholder="请点击选择时间" />
              </div>
            </div>
          </li>
          <li class="item-content">
            <div class="item-media">
              <i class="icon icon-f7"></i>
            </div>
            <div class="item-inner">
              <div class="item-title">服务店面</div>
              <div class="item-after">
                <select name="" id="" onchange="appointment.setOrderParams('storeId',this.value)"></select>
              </div>
            </div>
          </li>
          <li class="item-content">
            <div class="item-media">
              <i class="icon icon-f7"></i>
            </div>
            <div class="item-inner">
              <div class="item-title">店面联系电话</div>
              <div class="item-after" id="bossPhone">
                
              </div>
            </div>
          </li>
        </ul>
        <div class="row btn-group">
          <div class="col-50">
            <a href="#" class="button button-big button-fill" onclick="appointment.payStore(1)">到店支付</a>
          </div>
          <div class="col-50">
            <a class="button button-big button-fill button-success" onclick="appointment.payStore(0)">在线支付</a>
          </div>
        </div>
      </div>
    </div>

  </div>
  <!-- 底部 -->
  <!-- <nav class="bar bar-tab" id="golbalFooter"></nav> -->
  <div id="modal">

  </div>
  </div>
  <!-- 标题栏 -->

</body>
<script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
<script type="text/javascript" src="../js/index.js"></script>
<script type="text/javascript">
  var appointment = (function ($) {
    $.init()
    var appointment = new ST({
      golbalHeaderText: '完善预约订单',
      golbalHeaderFunc: function () {
        window.history.back()
      },
      orderParams: {
        startTime: "",
        endTime: '',
        price: '',
        name: "",
        serviceId: "",
        marketPrice: "",
        totalTime: "",
        storeList: [{
          storeId: ''
        }]
      },
      order: {
        service: ""
      },
      getStoreParams: {
        page: 1,
        pageSize: 100
      }
    })
    appointment.setOrderParams = function (method, value) {
      if (method === 'storeId') {
        appointment.orderParams.storeList[0].storeId = value.split('pp')[0]
        $('#bossPhone').text(value.split('pp')[1])
        return
      }
      appointment.orderParams[method] = value

      

    }
    for (var i in appointment.orderParams) {
      if (i !== 'storeList')
        appointment.orderParams[i] = appointment.getLocationSearch(i)
    }
    $('#serviceName').text(appointment.getLocationSearch('name'))
    appointment.payStore = function (f) {
      appointment.orderParams.startTime = $('#datetime-picker').val()
      var hash = appointment.orderParams.startTime.replace(/-/g, ',').replace(' ', ',').replace(':', ',') + ',00'
      appointment.orderParams.startTime = new Date(Number(hash.split(',')[0]), Number(hash.split(',')[1]), Number(
          hash.split(',')[2]), Number(hash.split(',')[3]), Number(hash.split(',')[4]), Number(hash.split(',')[5]))
        .getTime()
      var endTime = new Date(appointment.orderParams.startTime)
      appointment.orderParams.endTime = endTime.setMinutes(endTime.getMinutes() + Number(appointment.orderParams.totalTime))
      appointment.order.service = JSON.stringify(appointment.orderParams)
      appointment.http(f ? 'payStore' : 'payOnline')
    }

    appointment.pushAjax({
      payStore: {
        url: '/app/api/private/service/order',
        data: appointment.order
      },
      payOnline:{
        url: '/app/api/private/service/order',
        data: appointment.order
      },
      getStore: {
        url: '/app/api/public/store/storeList',
        data: appointment.getStoreParams
      }
    })

    appointment.pushAjaxSuccess({
      payStore: function (res) {
        if (res.code === '1') {
          window.location.href = './orderInfo.html'
        }else{
          $.toast(res.msg);
        }
      },
      payOnline : function (res) {
        if (res.code === '1') {
          window.location.href = './payOnline.html?orderId=' + res.data.order.orderId
        }else{
          $.toast(res.msg);
        }
      },
      getStore: function (res) {
        if (res.code === '1') {
          res.data.serviceList.forEach(function (ele,ind) {
            if(ind === 0) {
              appointment.orderParams.storeList[0].storeId = ele.storeId
              $('#bossPhone').text(ele.bossStaff.phone)
            }
            var option = document.createElement('option')
            $(option).attr('value', ele.storeId+'pp'+ele.bossStaff.phone)
            $(option).text(ele.name)
            $(option).appendTo($('select'))
          })
          
        }
      }
    })
    appointment.render()
    appointment.http('getStore')
    $('#datetime-picker').datetimePicker({})
    
    return appointment
  })($)
</script>

</html>